<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>我的投资</span>
      </div>
      <div class="block">
        <span class="demonstration">日期选择</span>
        <el-date-picker
          class="datepicker"
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="OnDateChange"
        >
        </el-date-picker>
        <el-button type="success" class="inquire" @click="onSearch">查询</el-button>
      </div>
      <el-tabs type="border-card" class="CardContent" @tab-click="onTabsClick">
        <el-tab-pane
          v-for="(item, index) in tabsList"
          :key="index"
          :label="item"
          ><el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="plan_name" label="计划名称" width="120">
            </el-table-column>
            <el-table-column
              prop="invest_amount"
              label="投资金额（元）"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="totalIncome"
              label="总待收利息（元）"
              width="140"
            >
            </el-table-column>
            <el-table-column prop="yearRate" label="年利率（%）" width="120">
            </el-table-column>
            <el-table-column prop="period" label="期数" width="100">
            </el-table-column>
            <el-table-column prop="deal_date" label="购买时间" width="120">
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="150">
            </el-table-column> </el-table
        ></el-tab-pane>
      </el-tabs>
      <el-pagination
        background
        @current-change="onPageChange"
        layout="prev, pager, next"
        :page-count="filterData.totalPages"
        class="paging"
        :current-page="filterData.curPage"
        :page-size="filterData.per_page"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      // 分页内容
      filterData: {
        // 总页数
        totalPages: 1,
        // 当前页
        curPage: 1,
        // 每页的数量
        per_page: 3,
        // 开始时间
        start:'',
        // 结束时间
        end:'',
        // 计划状态
        invest_type: 0,
      },
      // 标签页
      tabsList: ["购买中的计划", "回款中的计划", "已完成的计划"],
      // 日期内容
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  methods: {
    ...mapActions({
      // 获取投资列表
      AccessInvestmentRecords: "loan/AccessInvestmentRecords",
    }),
    onTabsClick(row) {
      // console.log("但table被点击时", row);
      // parseInt将数据转化成int类型
      this.filterData.invest_type = parseInt(row.index);
      // 刷新数据
      this.getAccessInvestmentRecords();
    },
    // 获取投资列表
    getAccessInvestmentRecords() {
      this.AccessInvestmentRecords(this.filterData).then((res) => {
        this.tableData = res.content;
        this.filterData.totalPages = res.paginateInfo.pages 
      });
    },
    // 当日期发生变化时
    OnDateChange(data){
      // console.log(data)
      if (data){
        // console.log('日期选择器发生变化时',data)
        this.filterData.start = data[0]
        this.filterData.end = data[1]
      } else{
        this.filterData.start = ''
        this.filterData.end = ''
      }
      console.log(this.filterData)
    },
    // 点击查询
    onSearch(){
      this.filterData.curPage = 1
      this.getAccessInvestmentRecords()
    },
    // 当页码发生变化时
    onPageChange(index){
      // console.log(index)
      this.filterData.curPage = index
      this.getAccessInvestmentRecords()
    },
  },
  created() {
    this.getAccessInvestmentRecords();
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .box-card {
    .block {
      .datepicker {
        margin-left: 10px;
      }
      .demonstration {
        margin-left: 10px;
      }
      .inquire {
        margin-left: 10px;
      }
    }
    .CardContent {
      margin-top: 15px;
    }
    .paging {
      margin-top: 15px;
    }
  }
}
</style>
